<!--用户页面-->
<template>
  <el-row>
    <el-col :span="24">
      <div class="headerEdit">
        <el-row style="background-color:white">
          <el-col :span="3" style="display: flex; align-items: center;">
            <!--设置logo-->
            <el-image  style="margin-left: 20px;height: 100px;width: auto;" src="image/login/DADARecipes.jpg" @click="navigateToHomePage"></el-image>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="4">
      <!--左侧菜单栏-->
      <div style="display: flex;margin-top:100px;height:100vh"  class="menuEdit">
        <el-menu
            mode="vertical"
            background-color="white"
            style="height:100%;width: 250px; justify-content: center;"
            text-color="#696969"
            active-text-color="#C0C0C0"
        >
          <el-menu-item index="1" style="font-size: 20px;margin: 10px 0px" @click="navigateToHomePage"><el-icon size="50px"><Reading /></el-icon>发现</el-menu-item>
          <el-menu-item index="2" style="font-size: 20px;margin: 10px 0px" @click="CreateArticle"><el-icon size="50px"><CirclePlus /></el-icon>发布</el-menu-item>
          <el-menu-item index="3" style="font-size: 20px;margin: 10px 0px"  @click="navigateToCart"><el-icon size="50px"><ShoppingCartFull /></el-icon>购物车</el-menu-item>
          <el-menu-item index="4" style="font-size: 20px;margin: 10px 0px" @click="navigateToShop"><el-icon size="50px"><ChatSquare /></el-icon>商城</el-menu-item>
          <el-menu-item index="5" style="font-size: 20px;margin: 10px 0px" @click="navigateToUserMessage"><el-icon size="50px"><Star /></el-icon>我的</el-menu-item>
          <el-menu-item index="6" style="font-size: 20px;margin: 10px 0px" @click="navigateToOrder"><el-icon size="50px"><FolderOpened /></el-icon>我的订单</el-menu-item>
          <el-menu-item index="7" style="font-size: 20px;margin: 10px 0px" @click="ChangeAddresses"><el-icon size="50px"><Setting /></el-icon>地址管理</el-menu-item>
          <el-menu-item index="8" style="font-size: 20px;margin: 10px 0px" @click="updatePassword"><el-icon size="50px"><SuitcaseLine /></el-icon>修改密码</el-menu-item>
          <el-menu-item index="9" style="font-size: 20px;margin: 10px 0px" @click="signOut"><el-icon size="50px"><FullScreen /></el-icon>注销用户</el-menu-item>
        </el-menu>
      </div>
    </el-col>
    <el-col :span="20">
      <!--右侧边内容-->
      <div style="width: 100%;height: 100vh;background-color:white;margin-top: 100px;">
        <div class="carousel-container" >
          <!--登录用户信息-->
          <el-row>
            <el-col :span="24" class="centered-col">
              <el-image :src="baseUrl+user.imgUrl" class="rounded-avatar" ></el-image>
            <!-- 展现昵称、粉丝、关注数量 -->
              <div>
                <el-row>
                  <span style="font-size: 30px;color: #333333;margin-left: 10px;margin-top: 10px">{{user.username}}</span>
                </el-row>
                <el-row>
                  <el-button style="margin-top: 10px;margin-left: 8px"  type="primary" round plain >{{user.age}}岁</el-button>
                </el-row>
                <el-row style="margin-top: 15px">
                  <span style="font-size: 15px;color: grey;margin-left: 10px">{{user.followerNum}}关注人数</span>
                  <span style="font-size: 15px;color: grey;margin-left: 10px">{{user.fansNum}}粉丝人数</span>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="padding-left: 30px">
          <!--使用card，展现我的文章-->
          <el-row type="flex" justify="center" align="middle" >
            <el-col :span="24" :offset="13" style="margin-top: 40px">
              <el-button type="primary" class="radiobutton" style="color: #333333" @click="showAllArticles" >笔记</el-button>
              <el-button type="primary" class="radiobutton" style="color: #333333" @click="showlikeArticles">收藏</el-button>
              <el-button type="primary" class="radiobutton" style="color: #333333" @click="showApproveArticles">点赞</el-button>
            </el-col>
          </el-row>

          <el-row :gutter="8" style="margin-left: 10px">
            <el-col :span="6" style="margin: 8px;" v-for="item in articleData" :key="item.id" v-show="myArticles">
              <!--展现我的文章卡片-->
              <!--新增点击事件，需要传对应文章的文章id-->
             <el-card style="margin: 5px 5px;" @click="navigateToArticle(item.id)" >
               <el-image :src="baseUrl+item.imgUrl"></el-image>
               <div>
                 <el-row>
                   <!-- 展示文章标题-->
                   <span style="float: left;">{{item.title}}</span>
                 </el-row>
                 <el-row>
                   <!--展示文章概要-->
                   <span style="float: right;font-size: 15px;color:grey">{{item.articleSummary}}</span>
                 </el-row>
               </div>
             </el-card>
            </el-col>
            <!--我的收藏文章卡片-->
            <el-col :span="6" style="margin: 8px;" v-for="item in mylikeArticles" :key="item.id" v-show="likeArticles">
              <!--展现我的收藏卡片-->
              <el-card style="margin: 5px 5px;" @click="navigateToArticle(item.id)">
                <el-image :src="baseUrl+item.imgUrl"></el-image>
                <div>
                  <el-row>
                    <!-- 展示文章标题-->
                    <span style="float: left;">{{item.title}}</span>
                  </el-row>
                  <el-row>
                    <!--展示文章概要-->
                    <span style="float: right;font-size: 15px;color:grey">{{item.articleSummary}}</span>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          <!--我的点赞文章卡片-->
            <el-col :span="6" style="margin: 8px;" v-for="item in myApproveArticles" :key="item.id" v-show="approveArticles">
              <!--展现我的收藏卡片-->
              <el-card style="margin: 5px 5px;" @click="navigateToArticle(item.id)">
                <el-image :src="baseUrl+item.imgUrl"></el-image>
                <div>
                  <el-row>
                    <!-- 展示文章标题-->
                    <span style="float: left;">{{item.title}}</span>
                  </el-row>
                  <el-row>
                    <!--展示文章概要-->
                    <span style=" float: right;font-size: 15px;color:grey">{{item.articleSummary}}</span>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-col>
  </el-row>
   <!--修改密码弹窗-->
  <el-dialog v-model="dialogVisible" title="修改密码" width="30%">
    <el-form label-width="80px">
      <el-form-item label="旧密码">
        <el-input type="password" placeholder="请输入旧密码" v-model="pwd.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input type="password" placeholder="请输入新密码" v-model="pwd.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" placeholder="请再次输入新密码" v-model="pwd.confirmPassword"></el-input>
      </el-form-item>
      <div style="padding-left: 150px">
        <el-button type="primary" plain @click="no">取消</el-button>
        <el-button type="primary" plain @click="yes">确认</el-button>
      </div>
    </el-form>
  </el-dialog>

</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";



//使用localstorage获取当前用户登录的信息
const userData = JSON.parse(localStorage.getItem('user'))
const userId = ref("")
const baseUrl = getBaseUrl();
//定义变量用于控制修改密码弹窗显示
const dialogVisible = ref(false);


//定义数组用于存储文章信息
const articleData = ref([
])

//定义一个对象用于保存用户修改密码的数据
const pwd = ref({
  id:"",
  oldPassword:"",
  password:"",
  confirmPassword:""
})


//定义方法用于获取当前用户的文章列表,此处的id是当前用户的id
const getArticleList =()=>{
  userId.value=userData.id;
  //向后端发送请求，获取当前用户的文章列表
  axios.get(BASE_URL+"/v1/article/selectMyArticle?userId="+userId.value).then((response)=>{
    //对返回的data进行判断
    if (response.data.code===2000){
      //将返回的数据赋值到articleData
      articleData.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//我的收藏文章列表
const mylikeArticles =ref([
])

//定义方法用于获取当前用户的收藏文章列表
const selectLikeArticle =()=>{
  userId.value=userData.id;
  //向后端发送请求
  axios.get(BASE_URL+"/v1/article/selectLikeArticle?userId="+userId.value).then((response)=>{
    //对返回值的code进行判断
    if(response.data.code===2000){
      //将值赋值给mylikeArticles列表
      mylikeArticles.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//我的点赞文章列表
const myApproveArticles =ref([
])

//定义方法用于查询我的点赞文章列表
const selectApproveArticle =()=>{
  userId.value=userData.id;
  //向后端发送请求
  axios.get(BASE_URL+"/v1/article/selectApproveArticle?userId="+userId.value).then((response)=>{
    //对返回值的code进行判断
    if(response.data.code===2000){
      //将值赋值给myApproveArticles列表
      myApproveArticles.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//定义user用于存储个人用户信息
const user = ref({

});

//定义方法用于向后端发送查询个人用户信息数据
const queryMessage =()=>{
  userId.value=userData.id;
  axios.get(BASE_URL+'/v1/user/queryMessage/'+userId.value).then((response)=>{
    if(response.data.code===2000){
      //将数据赋值给userData
      user.value=response.data.data[0];
    }else{
      ElMessage.error("用户信息查询失败!");
    }
  })
}



//定义方法用于发布文章
const CreateArticle =()=>{
  //跳转到发布文章的页面
  router.push('/CreateArticle');
}

//定义方法用于跳转到首页
const navigateToHomePage =()=>{
  router.push('index');
}

//定义方法跳转到个人信息页面
const navigateToUserMessage =()=>{
  router.push('/UserMessage');
}

//定义方法用于跳转到购物车页面
const navigateToCart =()=>{
  //跳转到购物车页面
  router.push('/Cart');
}

//定义方法用于跳转到商城页面
const navigateToShop =()=>{
  //跳转到商城页面
  router.push('/Shop');
}

//定义方法用于修改收货地址信息
const ChangeAddresses =()=>{
  router.push('/Addresses');
}

//定义变量用于控制我的文章卡片显示
const myArticles = ref(true);
//定义方法用于展现我的文章卡片
const showAllArticles =()=>{
  //关闭我的收藏文章卡片
  likeArticles.value = false;
  //关闭我的点赞文章卡片
  approveArticles.value = false;
  //开启我的文章卡片
  myArticles.value = true;
}


//直接加载我的文章卡片
onMounted(()=>{
  //获取用户信息
  queryMessage();
  //获取当前用户的文章列表
  getArticleList();
  //展现当前用户所有文章卡片
  showAllArticles();
})

//定义变量用于控制收藏文章卡片显示
const likeArticles = ref(false);

const showlikeArticles =()=>{
  //调用方法查询我的收藏文章
  selectLikeArticle();
  //关闭全部文章卡片
  myArticles.value = false;
  //关闭我的点赞文章卡片
  approveArticles.value = false;
  //开启我的收藏文章卡片
  likeArticles.value = true;
}

//定义变量用于控制我的点赞文章卡片
const approveArticles = ref(false);

const showApproveArticles =()=>{
  //调用方法查询我的点赞文章
  selectApproveArticle();
  //关闭全部文章卡片
  myArticles.value = false;
  //关闭我的收藏文章卡片
  likeArticles.value = false;
  //开启我的点赞文章卡片
  approveArticles.value = true;
}

//定义方法用于跳转到我的订单页面
const navigateToOrder =()=>{
  router.push('/Order');
}
//注销功能
const signOut =()=>{
  userId.value=userData.id;
  //提示用户确认要注销用户吗
  if(confirm("确认要注销用户吗?")){
    //向后端发送请求删除账户
    axios.post(BASE_URL+'/v1/user/logOff/'+userId.value).then((response)=>{
      if(response.data.code===2000){
        //清空localStorage的用户信息
        localStorage.removeItem("user");
        //跳转到登录页面
        router.push('/login');
      }
    })
  }
}

//定义方法用于修改密码功能
const updatePassword =()=>{
  //显示弹窗
  dialogVisible.value=true;
}

//定义方法用于点击卡片跳转到对应的文章详情页,此处的id为文章id
const navigateToArticle =(id)=>{
  //跳转到对应的文章详情页
  router.push('/Article?id='+id);
}

//定义方法用于取消修改密码
const  no =()=>{
  //提示用户是否确认要修改密码
  if(confirm("确认要取消修改密码吗?")){
    //清空数据
    pwd.value={};
    //关闭弹窗
    dialogVisible.value=false;
  }
}

//定义方法用于确认修改密码
const yes = ()=>{
  //判断新密码和确认的密码是否一致
  if(pwd.value.password !== pwd.value.confirmPassword){
    ElMessage.error("输入密码不一致!请重新输入");
    //清空表单的数据
    pwd.value={};
  }else{
    userId.value=userData.id;
    pwd.value.id=userId.value;
    //使用qs将数据转为字符串格式
    let data=qs.stringify(pwd.value);
    //向后端发送请求
    axios.post(BASE_URL+'/v1/user/password/',data).then((response)=>{
      //提示用户修改密码成功
      ElMessage.success("密码修改成功!");
      //清空表单的数据
      pwd.value={};
      //关闭弹窗
      dialogVisible.value=false;
      //删除localstorage中的用户信息
      localStorage.removeItem("user");
      //跳转到登录页面
      router.push('/login');
    })
  }
}

</script>

<style scoped>
.menuEdit{
   position: fixed;
}
.headerEdit{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: white;
}
.centered-col{
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.rounded-avatar {
  border: 1px solid white;
  border-radius: 50%;
  width: 150px; /* 设置宽度 */
  height: 150px; /* 设置高度 */
  object-fit: cover; /* 确保图片填充整个容器 */
}
.container {
  display: flex;
  align-items: center;
}

.transparent-input ::v-deep .el-input__inner {
  background-color: transparent !important;
  color: #606266; /* 文字颜色，可以根据需要调整 */
}

.radiobutton{
  width: 80px !important;
  height: 40px !important;
  background-color:transparent !important;
  border: transparent !important;
  /*设置初始字体大小*/
  font-size:20px;
  /*设置平滑过度效果*/
  transition: font-size 0.3s ;
}
。radiobutton:active{
  font-size: 25px ;
}

</style>